<template>
  <div class="my-padding">
    <el-form ref="form" :model="form" label-width="7rem">
      <el-form-item>
        <span slot="label">类型编号<span class="red">*</span></span>
        <el-input v-model="form.typeId" type="text" placeholder="请输入类型编号" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">类型名称<span class="red">*</span></span>
        <el-input v-model="form.typeName" type="text" placeholder="请输入类型名称"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">类型分级<span class="red">*</span></span>
        <el-select v-model="form.typeLevel" placeholder="请选择类型分级"
                   style="width:38%">
          <el-option
            v-for="item in deviceTypeList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateDeviceType">保存</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/deviceInfo";

  export default {
    data() {
      return {
        form: {
          typeId: "",
          typeName: "",
          typeLevel: undefined,
        },
        deviceTypeList: [
          {
            key: 1,
            value: "内部借用",
          },
          {
            key: 2,
            value: "可借出公司",
          },
          {
            key: 3,
            value: "保密设备",
          },
        ],
      };
    },
    created() {
      this.form.typeId=this.$route.query.id
      this.fetchData()
    },
    methods: {
      fetchData() {
        $.tbTypeById({tbTypeId:this.$route.query.id}).then(res=>{
          if (res.success){
            this.form=res.data
          }
        })
      },
      updateDeviceType() {
        if (!this.validate()) return;
        $.tbTypeUpdate(this.form).then(response => {
          // console.log(response.data)
          if (response.data == "修改成功") {
            this.$message({
              type: "success",
              message: "修改成功"
            });
            this.$router.replace({
              path: "index",
            });
          }
        });
      },

      validate() {
        let error = "";
        if (this.form.typeId == "" || this.form.typeId == null) {
          error = "请输入类型编号 \n";
        } else if (this.form.typeName == "" || this.form.typeName == null) {
          error = "请输入类型名称\n";
        } else if (this.form.typeLevel == "" || this.form.typeLevel == null || this.form.typeLevel == undefined) {
          error = "请选择类型分级\n";
        }
        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      },

      back() {
        this.$router.replace({
          path: "index",
        })
      },
    }
  };
</script>

<style>
  .red {
    color: red;
    font-size: 1.5rem;
    vertical-align: middle;
  }
</style>
